<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReadCat Debug</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>ReadCat 应用调试页面</h1>
    
    <div id="status"></div>
    
    <h2>测试结果</h2>
    <div id="tests"></div>
    
    <h2>控制台日志</h2>
    <div id="console"></div>
    
    <script>
        const status = document.getElementById('status');
        const tests = document.getElementById('tests');
        const consoleDiv = document.getElementById('console');
        
        // 捕获控制台输出
        const originalLog = console.log;
        const originalError = console.error;
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            consoleDiv.innerHTML += `<div class="status info">LOG: ${args.join(' ')}</div>`;
        };
        
        console.error = function(...args) {
            originalError.apply(console, args);
            consoleDiv.innerHTML += `<div class="status error">ERROR: ${args.join(' ')}</div>`;
        };
        
        // 测试 ReadCat 应用
        function testReadCat() {
            status.innerHTML = '<div class="status info">正在测试 ReadCat 应用...</div>';
            
            // 测试 1: 检查主应用是否在运行
            fetch('http://localhost:5173/')
                .then(response => {
                    if (response.ok) {
                        tests.innerHTML += '<div class="status success">✓ 开发服务器正常运行</div>';
                        return response.text();
                    } else {
                        throw new Error('服务器响应错误');
                    }
                })
                .then(html => {
                    if (html.includes('ReadCat')) {
                        tests.innerHTML += '<div class="status success">✓ HTML 包含 ReadCat 标题</div>';
                    } else {
                        tests.innerHTML += '<div class="status error">✗ HTML 不包含 ReadCat 标题</div>';
                    }
                    
                    if (html.includes('src="/src/main.ts"')) {
                        tests.innerHTML += '<div class="status success">✓ 主入口文件正确引用</div>';
                    } else {
                        tests.innerHTML += '<div class="status error">✗ 主入口文件引用错误</div>';
                    }
                })
                .catch(error => {
                    tests.innerHTML += `<div class="status error">✗ 连接失败: ${error.message}</div>`;
                });
            
            // 测试 2: 检查主 JS 文件
            fetch('http://localhost:5173/src/main.ts')
                .then(response => {
                    if (response.ok) {
                        tests.innerHTML += '<div class="status success">✓ main.ts 文件可访问</div>';
                        return response.text();
                    } else {
                        throw new Error('main.ts 访问失败');
                    }
                })
                .then(js => {
                    if (js.includes('createApp')) {
                        tests.innerHTML += '<div class="status success">✓ Vue 应用创建代码存在</div>';
                    } else {
                        tests.innerHTML += '<div class="status error">✗ Vue 应用创建代码缺失</div>';
                    }
                    
                    if (js.includes('mount("#app")')) {
                        tests.innerHTML += '<div class="status success">✓ 应用挂载代码存在</div>';
                    } else {
                        tests.innerHTML += '<div class="status error">✗ 应用挂载代码缺失</div>';
                    }
                })
                .catch(error => {
                    tests.innerHTML += `<div class="status error">✗ main.ts 检查失败: ${error.message}</div>`;
                });
            
            // 测试 3: 尝试在 iframe 中加载应用
            const iframe = document.createElement('iframe');
            iframe.src = 'http://localhost:5173/';
            iframe.style.width = '100%';
            iframe.style.height = '400px';
            iframe.style.border = '1px solid #ccc';
            iframe.style.marginTop = '20px';
            
            iframe.onload = function() {
                tests.innerHTML += '<div class="status success">✓ 应用在 iframe 中加载成功</div>';
                
                setTimeout(() => {
                    try {
                        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                        const appDiv = iframeDoc.getElementById('app');
                        if (appDiv && appDiv.innerHTML.trim()) {
                            tests.innerHTML += '<div class="status success">✓ Vue 应用已渲染内容</div>';
                        } else {
                            tests.innerHTML += '<div class="status error">✗ Vue 应用未渲染内容（可能是空白页面）</div>';
                        }
                    } catch (e) {
                        tests.innerHTML += '<div class="status error">✗ 无法检查 iframe 内容（跨域限制）</div>';
                    }
                }, 2000);
            };
            
            iframe.onerror = function() {
                tests.innerHTML += '<div class="status error">✗ 应用在 iframe 中加载失败</div>';
            };
            
            document.body.appendChild(iframe);
            
            status.innerHTML = '<div class="status info">测试完成，请查看结果</div>';
        }
        
        // 启动测试
        testReadCat();
    </script>
</body>
</html>